<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org"
      xmlns="http://www.w3.org/1999/xhtml" layout:decorate="~{layout/template}">
<head>
    <title>错误日志</title>
    <link rel="stylesheet" href="/css/operations/errorLog.css"/>
</head>
<body>
<div id="contentContainer" layout:fragment="content" class="contentContainer" v-cloak>

    <el-row id="toolbar">
        <el-col>
            <el-form :inline="true" class="searchBar">
                <el-form-item label="时间范围">
                    <el-date-picker
                            v-model="dateRange"
                            type="datetimerange"
                            range-separator="  至  "
                            placeholder="请选择时间范围">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSearch">
                        <i class="fa fa-search"></i>
                        <span>查询</span>
                    </el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>

    <el-row>
        <el-table
                border
                tooltip-effect="light"
                class="dataTable"
                :data="tableData"
                :height="tableHeight">
            <el-table-column
                    prop="logId"
                    label="日志ID"
                    align="center"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="shortClassName"
                    label="类名"
                    width="200">
                <template scope="scope">
                    <el-popover trigger="hover" title="完整类名" placement="top">
                        <p>{{ scope.row.className }}</p>
                        <div slot="reference">
                            <el-tag>{{ scope.row.shortClassName }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                    prop="methodName"
                    label="方法名"
                    width="200">
            </el-table-column>
            <el-table-column
                    label="异常类型">
                <template scope="scope">
                    <el-button type="text" @click="viewDetail(scope.row.logId)">
                        {{scope.row.exceptionName}}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="上报时间"
                    width="180">
            </el-table-column>
        </el-table>
    </el-row>

    <el-row id="pagination">
        <div class="pull-right">
            <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :current-page="pageNum"
                    :page-size="pageSize"
                    :page-sizes="pageSizes"
                    :total="total"
                    @size-change="onSizeChange"
                    @current-change="onCurrentChange">
            </el-pagination>
        </div>
    </el-row>

</div>

<th:block layout:fragment="staticFile">
    <script src="/js/operations/errorLog.js"></script>
</th:block>

</body>
</html>